<template>
  <div v-if="infoType == 'boxRent'" style="width:100%">
    <span class="_before">集装箱详情</span>
    <div class="box_div">
      <!-- <el-form model="boxInfo" style="width:400px;margin: auto;">
        <el-form-item label="箱号:">{{ boxInfo.containerNo || '--' }}</el-form-item>
        <el-form-item label="箱型:">{{ filters.boxType[boxInfo.boxType] || '--' }}</el-form-item>
        <el-form-item label="箱况:">{{ filters.boxCondition[boxInfo.boxCondition] || '--' }}</el-form-item>
        <el-form-item label="总重:">{{ boxInfo.boxType <= 10 ? '30480/32500' : '30480' }} KG</el-form-item>
            <el-form-item label="箱使期:">{{ boxInfo.boxUsagePeriod || '--' }}</el-form-item>
            <el-form-item v-if="boxInfo.location != '在途'" label="堆存天数:">{{ boxInfo.inDays }}</el-form-item>
            <el-form-item label="实时位置:">{{ boxInfo.location }}</el-form-item>
            <el-form-item v-if="boxInfo.status != 5" label="离场日期:">{{ formatDate(boxInfo.outDate, 2) || '--'
              }}</el-form-item>
            <el-form-item v-if="boxInfo.location != '在途'" label="进场日期:">{{ formatDate(boxInfo.inDate, 2) || '--'
              }}</el-form-item>
            <el-form-item label="离场天数:">{{ boxInfo.outDays }} &nbsp;
              <span v-if="boxInfo.outDays">所离堆场 - {{ boxInfo.yardName || '--' }}</span>
            </el-form-item>
            <el-form-item label="状态:">{{ filters.status[boxInfo.status] || '--' }}</el-form-item>
            <el-form-item v-if="boxInfo.status != 5" label="超期天数:">{{ overDays }}</el-form-item>
            <el-form-item v-if="boxInfo.status != 5" label="还箱城市:">{{ boxInfo.returnCityName || '--' }}</el-form-item>
            <el-form-item label="外调:">{{ boxInfo.containerClassify == 15 ? '是' : '否' }}</el-form-item>
            <el-form-item label="外调箱集装箱公司:">{{ boxInfo.outBoxCompanyName}}</el-form-item>
      </el-form> -->
      <el-row gutter="10">
        <el-col :span="6">箱号：{{ boxInfo.containerNo || '--' }}</el-col>
        <el-col :span="6">箱源：{{ basicConfig.containerClass[boxInfo.containerClassify] || '--' }}</el-col>
        <el-col :span="6" class="text-ellipsis">
          <el-tooltip effect="dark" :content="boxInfo.outBoxCompanyName || '--'" placement="top">
            集装箱公司：{{ boxInfo.outBoxCompanyName || '--' }}
          </el-tooltip>
        </el-col>
        <el-col :span="6" class="text-ellipsis">
          <el-tooltip effect="dark" :content="boxInfo.agentName || '--'" placement="top">
            客户：{{ boxInfo.agentName || '--' }}
          </el-tooltip>
        </el-col>
        <el-col :span="6" class="marginTop10">箱型：{{ filters.boxType[boxInfo.boxType] || '--' }}</el-col>
        <el-col :span="6" class="marginTop10">箱况：{{ filters.boxCondition[boxInfo.boxCondition] || '--' }}</el-col>
        <el-col :span="6" class="marginTop10">箱标：{{ boxInfo.totalWeight || '--' }}</el-col>
        <el-col :span="6" class="marginTop10">实时位置：{{ boxInfo.location || '--' }}</el-col>
        <el-col :span="6" class="marginTop10" v-if="boxInfo.location == '在途'">
          提箱城市：{{ boxInfo.carryCityName || '--' }}
        </el-col>
        <el-col :span="6" class="marginTop10" v-if="boxInfo.location == '在途'">
          还箱城市：{{ boxInfo.returnCityName || '--' }}
        </el-col>
        <el-col :span="6" class="marginTop10">进场日期：{{ formatDate(boxInfo.inDate, 2) || '--' }}</el-col>
        <el-col :span="6" class="marginTop10" v-if="boxInfo.location != '在途'">堆存天数：{{ boxInfo.inDays }}</el-col>
        <el-col :span="6" class="marginTop10">离场日期：{{ formatDate(boxInfo.outDate, 2) || '--' }}</el-col>
        <el-col :span="6" class="marginTop10">离场天数：{{ boxInfo.outDays }}
          <el-button type="primary" plain v-if="boxInfo.outDays">所离堆场 - {{ boxInfo.yardName }}</el-button>
        </el-col>
        <el-col :span="6" class="marginTop10">超期天数：{{ overDays }}</el-col>
        <el-col :span="6" class="marginTop10">超期1天后（$/箱/天）：{{ boxInfo.overdueFeeDay || '--' }}</el-col>
        <el-col :span="6" class="marginTop10" v-if="boxInfo.location == '在途'">
          超期费：{{ (overDays * boxInfo.overdueFeeDay) || '--' }}
        </el-col>
        <el-col :span="6" class="marginTop10" v-if="boxInfo.location == '在途'">
          业务类型：{{ basicConfig.orderType[boxInfo.orderType] || '--' }}
        </el-col>
        <el-col :span="6" class="marginTop10">箱使期：{{ boxInfo.boxUsagePeriod || '--' }}</el-col>
        <el-col :span="6" class="marginTop10">状态：{{ basicConfig.containerStatus[boxInfo.status] || '--' }}</el-col>
        <el-col :span="24" class="marginTop10">备注：{{ boxInfo.remark || '--' }}</el-col>
      </el-row>
    </div>
  </div>
  <div v-if="infoType == 'boxHuiDiao'" style="width:100%">
    <span class="_before">回调箱详情</span>
    <div class="box_div">
      <el-form model="boxInfo" style="width:400px;margin: auto;">
        <el-form-item label="箱号:">{{ boxInfo.containerNo || '--' }}</el-form-item>
        <el-form-item label="箱型:">{{ filters.boxType[boxInfo.boxType] || '--' }}</el-form-item>
        <el-form-item label="箱况:">{{ filters.boxCondition[boxInfo.boxCondition] || '--' }}</el-form-item>
        <el-form-item label="总重:">{{ boxInfo.boxType <= 10 ? '30480/32500' : '30480' }} KG</el-form-item>
        <el-form-item label="提箱日期:">{{ formatDate(boxInfo.packingDate, 2) || '--' }}</el-form-item>
        <el-form-item label="还箱日期:">{{ formatDate(boxInfo.returnDate, 2) || '--' }}</el-form-item>
        <el-form-item label="箱使期:">{{ boxInfo.boxUsagePeriod || '--' }} 天</el-form-item>
        <el-form-item label="已用天数:">{{ boxInfo.useDays || '--' }} 天</el-form-item>
        <el-form-item label="超期天数:">{{ boxInfo.overdueDays || '--' }}</el-form-item>
        <el-form-item label="状态:">{{ filters.status[boxInfo.status] || '--' }}</el-form-item>
        <el-form-item label="实时位置:">{{ boxInfo.location }}</el-form-item>
        <el-form-item label="集装箱公司:">{{ boxInfo.companyName }}</el-form-item>
        <el-form-item label="城市:">{{ boxInfo.returnCityName || '--' }}</el-form-item>
        <el-form-item label="国家:">{{ boxInfo.returnCountryName || '--' }}</el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import {formatDate} from '@/utils'
import {computed, ref} from 'vue'
import {numAdd, numSub, numMulti} from '@/utils/compute'
import basicConfig from '@/constant/containerInfo';

const filters = ref({
  status: {5: '堆存中', 10: '提箱中', 15: '已提', 20: '未还', 25: '还箱中', 30: '已卖', 35: '外加'},
  //集装箱状态：5-堆存中、10-提箱中、15-已提、20-未还、25-还箱中 30-已卖
  boxType: {5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP'},
  boxCondition: {5: '全新', 10: '次新', 15: '适货'},
  containerClassify: {5: '租箱', 10: '回调', 15: '外调'} //5-租箱 10-回调 15-外调
})

const props = defineProps({
  boxInfo: {
    type: Object,
    default: () => ({})
  },
  infoType: {
    type: String,
    default: 'boxRent'
  }
})

//计算 超期天数
const overDays = computed(() => {
  const boxInfo = props.boxInfo
  if (boxInfo.outDays) {
    if (boxInfo.outDays > boxInfo.boxUsagePeriod) {
      return numSub(boxInfo.outDays, boxInfo.boxUsagePeriod)
    } else {
      return 0
    }
  } else {
    return 0
  }
})


</script>

<style scoped>
.box_div {
  box-sizing: border-box;
  padding: 20px 0 20px 10px;
  /* text-align: center; */
}
</style>
